<template>
  <div id="header">
    <div class="header_logo">
      <img src="@/assets/binbing/homePageImg/logo_red.png" />
    </div>
    <router-link to="SearchTurn">
      <div class="header_search">
      <div class="search_icon">
        <span class="iconfont icon-sousuo"></span>
      </div>
    </div>
    </router-link>
    <div class="header_icon">
      <div class="icon_left">
        <span class="iconfont icon-liaotian"></span>
      </div>
      <router-link to="VipCenterAll">
        <div class="icon_right">
        <img src="@/assets/binbing/homePageImg/headergift.webp" />
      </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
    name:"Search"
};
</script>

<style scoped>
@import url("../../../../assets/binbing/homePageImg/iconfont/iconfont.css");

#header {
  width: 100%;
  height: 0.58rem;
  background-color: #f1f3f5;
  padding: 0 0.16rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .header_logo {
  width: 0.8rem;
  height: 0.26rem;
  margin-right: 0.16rem;
}
#header .header_logo img {
  width: 0.8rem;
  height: 0.26rem;
}
#header .header_search {
  width: 1.98rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  background-color: rgba(0, 0, 0, 0.05);
  margin-right: 0.16rem;
  position: relative;
}
#header .header_search .search_icon {
  width: 0.16rem;
  height: 0.16rem;
  position: absolute;
  border-radius: 0%;
  top: 50%;
  transform: translateY(-50%);
  left: 0.13rem;
  text-align: center;
  line-height: 0.16rem;
  font-weight: 600;
}
.icon-sousuo {
  font-size: 0.16rem;
}
#header .header_icon {
  width: 0.72rem;
  height: 0.24rem;
  display: flex;
}
.icon_left {
  width: 0.24rem;
  height: 0.24rem;
  margin-right: 0.24rem;
  text-align: center;
}
.icon_left .icon-liaotian {
  font-size: 0.24rem;
  line-height: 0.24rem;
}
.icon_right {
  width: 0.24rem;
  height: 0.24rem;
}
.icon_right img {
  display: block;
  width: 0.24rem;
  height: 0.24rem;
}
</style>